<template>
    <div class="container">
        <div @click="open" class="value-p">
            
            <label v-if="currentDate">{{currentDate | formatDateTime('yyyy-MM-dd')}}</label>
            <label class="gray" v-else>请选择日期</label>
        </div>
        <van-popup v-model="visible" round position="bottom">
            <van-datetime-picker
               @confirm="confirm"
               @cancel="close"
                type="date"
                title="选择年月日"
            />
        </van-popup>
    </div>
</template>
<script>
import { Popup, DatetimePicker   } from 'vant'
export default {
    components: {
        [Popup.name]: Popup, [DatetimePicker .name]: DatetimePicker 
    },
    props: {
        value: String,
        disable: Boolean
    },
    watch: {
        value(newVal, oldVal){
            
           this.currentDate = newVal
        }
    },
    data(){
        return {
            visible: false,
           
            currentDate: ''
        }
    },
    methods: {
        confirm(val){
            
            this.currentDate = val
            this.close()
            
            this.$emit('input', this.formateDate(val))

            this.$emit('change')
        },
        formateDate(date){
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            if(month < 10) {
                month = '0' + month
            }

            var d = date.getDate()
            if(d < 10) {
                d = '0' + d
            }
            return year + '-' + month + '-' + d
        },
        open(){
            if (this.disable) {
                return
            }
            this.visible = true
        },
        close(){
            this.visible = false
        }
    },
    mounted(){

    }
}
</script>
<style scoped>
.container{
    height: 100%; width: 100%;
}
.value-p{
    height: 100%; width: 100%; 
}
.value-p::before{
    content: ''; display: inline-block; height: 100%; vertical-align: middle;
}
.gray{
    color: #969696;
}
</style>